<template>
	<!-- 首页组件部分 -->
	<view class="">
		<!-- 没事多去Uni-app官网看啊看什么 APL 组件了 插件了 标签了 事件了-->
		
		<!-- 任务：有主页面的操作详情图片会传递一个 ：id值 -->
		<!-- 还有： 点击下面介绍文字会传递它的 介绍的 关键字 -->
		<!-- 上传到码云  -->
		<!-- 注意：代码格式清晰明了 还有见名只意思  css样式写在下面 -->
		
		<!-- 循环 list对象了 添加了点击事件传递了 索引值 -->
		<view v-for="(item,index) of list" :key="index" class="list">
			<!-- 介绍标题部分 -->
			<view class="header_title" @tap='clickName(index)'>
				<!-- 添加了路径设置了背景图片 -->
				<view :style="{'backgroundImage': 'url(' + item.banner + ') '}" class="listImg">
				</view>
				<!-- 渲染了 数组里的名字 -->
				<view class="listText">{{item.name}}</view>
			</view>
			
			<!-- 产品列表 -->
			<!-- 里面还要用 for渲染出来 -->
			<view class="product_List">
				<view class="" v-for="(items,indexs) of item.goodsList" :key="indexs">
					<!-- 产品列表图片 -->
					<view>
						<image :src="items.list_pic_url" mode=""  class="product_Img" @tap='clickId(items.id)'></image>
					</view>
					<!-- 产品介绍 -->
					<view class="product_Introduce">
						{{items.name}}
					</view>
					<!-- 产品价格 -->
					<view class="product_Price">
						&yen;{{items.min_retail_price}}
					</view>
				</view>
			</view>
			<!-- 查看更多 -->
			<view class="product_More" @tap='clickMore(item.name)'>
				点击查看更多{{item.name}}
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:{ // 父级传值给子级的
			list: {
				type: Array, // 接收的格式
				default: () => { // 回调函数 数组接收
					return []
				}
			}
		},
		data() {
			return {
				
			}
		},
		
		methods:{
			clickName(index) { // 声明的函数 接收索引值
				this.$emit('click',index,'好的') // 子级向父级传递参数this.$emit('自定义的事件', 参数)可以传递多个参数 父级对应接收即可
			},
			clickId(id) {
				this.$emit('id',id)
			},
				
			clickMore(name){
				this.$emit('more',name)
			}
		}
	}
</script>

<style lang="scss" scoped> 
// scss: 是相当于可以对应html结构可以父级保含子级  可以进行相应的操作
// 注意：类名所在位置是否对的 
// 方便了里面 类名的书写
	.list{
		// 注意层级
		// 其中图片没有文字高的
		// 注意不用加逗号分隔
		position: relative;
		margin-top: 20rpx;
		.header_title{
			.listImg{
				width: 100%;
				height: 180rpx;
				border-radius: 14rpx;
			}
			.listText{
				width: 100%;
				height: 180rpx;;
				position: absolute;
				top: 0;z-index: 10;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
				font-weight: 600;
				font-size: 46rpx;
				background-color: rgba(0,0,0,0.2);
				border-radius: 20rpx;
			}
		}
		// 产品列表
		.product_List{
			    // width: 375rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
			.product_Img{
				width: 200rpx;
				height: 200rpx;
				background-color: rgba(0,0,0,.05);
				margin-top: 20rpx;
			}
			.product_Introduce{
				width: 200rpx;
				overflow: hidden;
				font-size: 24rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.product_Price{
				font-size: 30rpx;
				color: #ff3456;
			}
		}
		
		// 查看更多
		.product_More{
			display: flex;
			justify-content: center;
			padding: 30rpx;
		}
	 }
</style>